// 导入 useState 的函数
import React, { useState } from 'react';

// 定义一个组件-函数组件
export const Counter = () => {
  // 和状态挂钩🪝
  const [count, setCount] = useState(1);

  // 箭头函数表达式
  const handleClick = (e) => {
    console.log(e);
    // 修改组件状态，要通过 setCount 函数
    // count = 10; // 不能直接修改
    // setCount(10);
    setCount(count + 1);
  };

  //   function handleClick(e) {
  //     console.log(e);
  //     setCount(count + 1);
  //   }

  // 函数定义表达式
  //   const handleClick = function (e) {
  //     console.log(e);
  //     setCount(count + 1);
  //   };

  return (
    <div>
      <h3>我是使用hooks的组件</h3>
      <h1>{count}</h1>
      <button onClick={handleClick}>+1</button>
    </div>
  );
};
